<template>
    <el-row>
        <el-col :span="12" class="white-block">
            <p>默认在右侧的分页</p>
            <page :data="data" v-if="data" class="mt20 "></page>
            <p class="mt20">在中间的分页</p>
            <page :data="data" v-if="data" :layout="layout" class="mt20 "></page>
        </el-col>
        <el-col :span="11" :offset="1" class="white-block">
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="name"
                    label="参数名">
                </el-table-column>
                <el-table-column
                    prop="usage"
                    label="参数用法">
                </el-table-column>
                <el-table-column
                    prop="info"
                    label="参数说明">
                </el-table-column>
                <el-table-column
                    prop="choice"
                    label="可选值">
                </el-table-column>
                <el-table-column
                    prop="default"
                    label="默认值">
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>

<script>
    import page from '../../components/pagination'

    export default {
        name: '',
        data() {
            return {
                data: {
                    current: 1,
                    pages: 20,
                    records: [],
                    searchCount: '',
                    size: 20,
                    total: 1000
                },
                layout: 'prev, pager, next, slot',
                tableData: []
            }
        },
        mounted() {
            let tableData = [
                {
                    name: 'data',
                    usage: ':data',
                    info: '分页数据',
                    choice: '-',
                    default: '-'
                },
                {
                    name: 'layout',
                    usage: ':layout',
                    info: '分页组件展示内容',
                    choice: '-',
                    default: '\'->, prev, pager, next, slot\''
                }
            ]
            this.tableData = tableData
        },
        methods: {},
        components: {
            page
        }
    }
</script>

<style scoped lang="less">

</style>
